<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导出图片</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <script src="../../libs/other/FileSaver.min.js" type="text/javascript"></script>
    <!--导入本页面外部样式表-->
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <style>
        #mapCon {
            width: 100%;
            height: 90%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="export-png" value="下载 PNG" />
    </div>
    <div id="mapCon" title="地图显示" style="padding: 5px">
    </div>

    <script>
        // this example uses FileSaver.js for which we don't have an externs file.
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + parent.TiandituKey(),//parent.TiandituKey()为天地图密钥
                wrapX: false,
                crossOrigin: "Anonymous"
            })
        });
        var Tianditu_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + parent.TiandituKey(),//parent.TiandituKey()为天地图密钥
                wrapX: false,
                crossOrigin: "Anonymous"
            })
        });
        var map = new ol.Map({
            layers: [TiandiMap_vec, Tianditu_cva,
                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: "../../data/geojson/countries.geojson",
                        format: new ol.format.GeoJSON()
                    })
                })
            ],
            target: 'mapCon',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

        document.getElementById('export-png').addEventListener('click', function () {
            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                canvas.toBlob(function (blob) {
                    saveAs(blob, 'map.png');
                });
            });
            map.renderSync();
        });
    </script>
</body>
</html>
